import React, { useEffect } from 'react';
import './feature.less';
import { history } from 'umi';

export default function feature() {
  // 跳转到我的地址
  const goAddress = () => {
    history.push('/hello/address');
  };
  // 跳转到我的评价
  const goComment = () => {
    history.push('/hello/comment');
  };
  // 跳转到我的收藏
  const goCollect = () => {
    history.push('/hello/collect');
  };

  return (
    <div className="feature">
      <div className="feature-content">
        {/* 收货地址 */}
        <div className="feature-content-box" onClick={goAddress}>
          <svg
            className="feature-icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="8262"
            width=".7rem"
            height=".7rem"
          >
            <path
              d="M512.2 917.4L266.7 676.8c-59.7-63-92.6-145.5-92.6-232.4 0-45.6 8.9-89.9 26.6-131.5 17-40.2 41.4-76.4 72.4-107.4s67.2-55.4 107.4-72.4c41.7-17.6 85.9-26.6 131.5-26.6 45.6 0 89.9 8.9 131.5 26.6 40.2 17 76.4 41.4 107.4 72.4s55.4 67.2 72.4 107.4c17.6 41.7 26.6 85.9 26.6 131.5 0 89.5-34.6 173.8-97.5 237.5l-0.7 0.7-7.1 7-232.4 227.8z m-203-249.3l0.3 0.3L512.2 867l207.5-203.4 0.2-0.2 7.1-6.9c56.1-56.8 87-132.2 87-212.1 0-166.5-135.4-301.9-301.9-301.9-166.5 0-301.9 135.4-301.9 301.9 0 77.5 29.3 151.1 82.5 207.4l16.5 16.3z"
              p-id="8263"
              fill="#5e5e5e"
            ></path>
            <path
              d="M512 590.7c-80.6 0-146.2-65.6-146.2-146.2S431.4 298.3 512 298.3s146.2 65.6 146.2 146.2S592.6 590.7 512 590.7z m0-256.4c-60.8 0-110.2 49.4-110.2 110.2S451.2 554.7 512 554.7c60.8 0 110.2-49.4 110.2-110.2S572.8 334.3 512 334.3z"
              p-id="8264"
              fill="#5e5e5e"
            ></path>
          </svg>
          <h4>收获地址</h4>
        </div>
        {/* 我的评价 */}
        <div className="feature-content-box" onClick={goComment}>
          <svg
            className="fearure-icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="15412"
            width=".7rem"
            height=".7rem"
          >
            <path
              d="M514.4 850.5c-13.3 0-25.9-5.2-35.3-14.5l-84-81.6H252.4c-27.4 0-52-9.6-69.5-27-17.4-17.4-27-42-27-69.3V275.6c0-27.7 9.6-53.2 27-71.7 17.8-19 42.5-29.4 69.5-29.4h521.3c27 0 51.6 10.5 69.4 29.4 17.4 18.5 26.9 44 26.9 71.7v382.5c0 27.3-9.6 51.9-27 69.3s-42 27-69.3 27H632.3l-82.4 81.4c-9.6 9.5-22.2 14.7-35.5 14.7z m-262-626c-27.4 0-46.5 21-46.5 51.1v382.5c0 29 17.4 46.3 46.5 46.3h152.8c6.5 0 12.8 2.5 17.4 7.1l91.4 88.8c0.1 0.1 0.2 0.2 0.3 0.2h0.1c0.1 0 0.3-0.1 0.4-0.3l89.7-88.6c4.7-4.6 11-7.2 17.6-7.2h151.6c29 0 46.3-17.3 46.3-46.3V275.6c0-30.1-19-51.1-46.3-51.1H252.4z"
              p-id="15413"
              fill="#8a8a8a"
            ></path>
            <path
              d="M349.9 431.2c-24.2 0-43.9 19.6-43.9 43.9 0 24.2 19.6 43.9 43.9 43.9 24.2 0 43.9-19.6 43.9-43.9 0-24.3-19.7-43.9-43.9-43.9zM506.2 431.2c-24.2 0-43.9 19.6-43.9 43.9 0 24.2 19.6 43.9 43.9 43.9 24.2 0 43.9-19.6 43.9-43.9 0-24.3-19.7-43.9-43.9-43.9zM462.3 475v10.8V475zM661.5 430.6c-24.2 0-43.9 19.6-43.9 43.9 0 24.2 19.6 43.9 43.9 43.9 24.2 0 43.9-19.6 43.9-43.9 0-24.3-19.7-43.9-43.9-43.9z m-43.9 43.9z"
              p-id="15414"
              fill="#5e5e5e"
            ></path>
          </svg>
          <h4>我的评价</h4>
        </div>
        {/* 我的收藏 */}
        <div className="feature-content-box" onClick={goCollect}>
          <svg
            className="feature-icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3719"
            width=".7rem"
            height=".7rem"
          >
            <path
              d="M736.028 909.682c-10.605 0-22.535-3.977-31.814-10.605l-184.259-133.887c-5.302-3.977-11.93-3.977-17.233 0l-184.259 133.887c-19.884 14.581-43.745 14.581-63.629 0s-26.511-37.117-19.884-59.652l70.257-216.074c1.326-5.302 0-11.93-5.302-15.907l-182.934-133.887c-19.884-14.581-26.511-37.117-19.884-59.652 7.954-22.535 27.838-37.117 51.698-37.117h228.005c6.627 0 11.93-3.977 13.257-9.28l70.257-216.074c7.954-22.535 27.838-37.117 51.698-37.117s43.745 14.581 51.698 37.117v0l70.257 216.074c1.326 5.302 7.954 9.28 13.257 9.28h228.005c23.861 0 43.745 14.581 51.698 37.117s0 46.397-19.884 59.652l-184.259 133.887c-5.302 3.977-6.627 9.28-5.302 15.907l70.257 216.074c7.954 22.535 0 46.397-19.884 59.652-9.28 6.627-19.884 10.605-31.814 10.605zM512 724.098c10.605 0 22.535 3.977 31.814 10.605l184.259 133.887c7.954 5.302 14.581 1.326 17.233 0 1.326-1.326 7.954-6.627 5.302-15.907l-70.257-216.074c-6.627-22.535 0-46.397 19.884-59.652l184.259-133.887c7.954-5.302 5.302-13.257 5.302-15.907-1.326-2.652-3.977-9.28-13.257-9.28h-229.329c-23.861 0-43.745-14.581-51.698-37.117l-70.257-217.399c-2.652-9.28-10.605-9.28-13.257-9.28s-10.605 1.326-13.257 9.28l-70.257 216.074c-6.627 22.535-27.838 37.117-51.698 37.117h-228.005c-9.28 0-13.257 7.954-13.257 9.28-1.326 2.652-2.652 10.605 5.302 15.907l184.259 133.887c18.558 13.257 26.511 38.444 19.884 59.652l-71.582 216.074c-2.652 9.28 2.652 14.581 5.302 15.907 1.326 1.326 9.28 5.302 17.233 0l184.259-133.887c9.28-6.627 21.21-9.28 31.814-9.28z"
              p-id="3720"
              fill="#939393"
            ></path>
          </svg>
          <h4>我的收藏</h4>
        </div>
        {/* 邀请好友 */}
        <div className="feature-content-box">
          <svg
            className="feature-icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3632"
            width=".7rem"
            height=".7rem"
          >
            <path
              d="M445.343744 525.346816c-96.13312-47.366144-133.09952-149.192704-108.351488-236.546048 24.864768-87.762944 102.639616-145.75616 194.801664-145.401856 86.628352 0.333824 164.511744 60.598272 188.198912 146.04288 24.3712 87.912448-12.814336 189.353984-109.631488 236.466176 5.20192 1.683456 9.558016 3.196928 13.973504 4.5056 36.612096 10.868736 70.158336 27.89376 101.011456 50.300928 8.415232 6.111232 6.981632 16.175104 4.777984 19.83488-1.867776 3.100672-11.169792 7.90528-20.043776 1.411072-46.485504-34.013184-98.535424-54.110208-155.746304-58.79808-166.172672-13.615104-300.937216 98.162688-333.135872 244.979712-1.386496 6.311936-2.189312 12.752896-3.6352 19.048448-1.970176 8.574976-8.32512 13.268992-16.441344 11.892736-5.834752-0.989184-9.46176-5.6832-9.07264-15.777792 25.847808-139.669504 106.928128-230.600704 241.50016-274.550784 1.611776-0.526336 3.29728-0.825344 4.931584-1.294336 1.927168-0.555008 3.84-1.1776 6.862848-2.113536z m82.825216-9.220096c87.943168 3.52256 173.04576-72.853504 172.818432-172.355584-0.221184-96.72704-76.38016-174.153728-172.378112-174.239744-96.088064-0.086016-172.398592 77.13792-172.83072 173.799424-0.446464 99.612672 84.600832 176.115712 172.3904 172.795904zM767.96928 720.86528c0 28.52864 0.004096 55.47008-0.002048 82.409472-0.002048 13.092864-6.965248 15.839232-12.519424 15.828992-4.984832 0-11.988992-2.699264-11.99104-15.372288-0.008192-27.22816-0.002048-54.458368-0.002048-82.868224h-47.540224c-11.784192 0-23.56224-0.219136-35.340288 0.155648-3.422208 0.108544-7.186432-0.27648-9.975808-2.433024-2.254848-1.742848-3.81952-4.38272-4.624384-7.092224-0.32768-1.107968-0.653312-2.4064-0.653312-3.569664 0-4.347904 3.733504-9.515008 7.763968-10.903552 2.6624-0.915456 5.423104-0.804864 8.194048-0.794624l8.742912 0.026624c5.844992 0.016384 11.689984 0.028672 17.534976 0.04096a22901.66784 22901.66784 0 0 0 55.90016 0.057344v-10.180608c0-23.887872-0.018432-47.775744 0.008192-71.663616 0.012288-11.010048 7.258112-16.044032 12.675072-15.560704 6.549504-0.006144 12.15488 5.824512 11.997184 14.8992-0.464896 26.94144-0.165888 53.895168-0.165888 82.501632h10.02496c24.911872 0 49.829888 0.280576 74.733568-0.14336 7.944192 0.114688 12.62592 7.921664 12.62592 12.169216 0 5.031936-5.193728 12.648448-12.529664 12.589056-24.225792-0.305152-48.457728-0.1024-72.687616-0.100352-3.678208 0.004096-7.354368 0.004096-12.169216 0.004096z"
              fill="#5e5e5e"
              p-id="3633"
            ></path>
          </svg>
          <h4>邀请好友</h4>
        </div>
        {/* 官方客服 */}
        <div className="feature-content-box">
          <svg
            className="fearure-icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="19541"
            width=".7rem"
            height=".7rem"
          >
            <path
              d="M369.438 598.472c0 0 0 130.228 143.382 130.228 143.407 0 143.407-130.229 143.407-130.229S518.526 724.352 369.438 598.472zM775.936 545.413c0-145.31-117.806-263.112-263.115-263.112-145.328 0-263.131 117.802-263.131 263.112 0 71.191 28.297 135.639 74.141 183.044 20.847 18.754 43.582 35.307 68.604 48.327 13.604 7.041 28.619 14.161 44.36 20.601 24.069 7.203 49.59 11.177 76.025 11.177C658.13 808.561 775.936 690.753 775.936 545.413zM512.82 769.091c-123.497 0-223.661-100.165-223.661-223.678 0-123.509 100.165-223.616 223.661-223.616 123.513 0 223.646 100.107 223.646 223.616C736.467 668.926 636.333 769.091 512.82 769.091zM847.693 462.837C810.673 312.279 674.766 200.622 512.82 200.622c-161.894 0-297.691 111.526-334.794 262 0 0-92.877 14.681-88.773 108.101 4.118 93.394 102.066 99.074 102.066 99.074 1.179 2.988 21.77-2.909 29.163-4.158-15.264-37.045-23.756-77.631-23.756-120.225 0-174.556 141.533-316.062 316.093-316.062 174.556 0 316.061 141.506 316.061 316.062 0 139.307-90.079 257.493-215.165 299.565-8.046 2.747-16.525-0.896-16.525-0.896s-21.203-3.968-47.784 3.536c-13.078 3.751-18.701 17.689-17.916 29.925 0.979 14.566 6.497 25.031 21.721 27.345 19.598 3.072 47.459 6.55 57.977-14.406 2.856-5.682 5.954-16.253 12.642-18.512 96.655-32.861 174.014-107.418 210.71-202.201 0 0 97.415-11.418 100.271-101.224C937.688 478.767 847.693 462.837 847.693 462.837z"
              fill="#5e5e5e"
              p-id="19542"
            ></path>
          </svg>
          <h4>官方客服</h4>
        </div>
      </div>
    </div>
  );
}
